<template>
	<section :class="bushu == 1 ? 'chongzhis1' : 'chongzhis'">
		<!-- <navbar :title="'充值'" :right_show="true" :type="1" ref="navbar"></navbar> -->
		<topHeader></topHeader>
		<!-- <section class="top-df">
	   	<div>
	   		{{$t('newList.title2')}}
	   	</div>
	   	<div @click="onClickRight">
	   		<img src="../assets/images/zaixiankefu.png" alt="">
	   		{{$t('h_title.xianshangkefu')}}
	   	</div>
	   </section> -->
		<section id="one" v-if="bushu == 1">
			<article @click="fun_one(1)" :class="{adsf:type==1}">
				<img src="~path_img/fps.png" alt="">
				<span>{{$t('newList.title3')}}</span>
			</article>
			<article @click="fun_one(2)" :class="{adsf:type==2}">
				<img src="~path_img/bld.png" alt="">
				<span>{{$t('newList.title4')}}</span>
			</article>
			<article @click="fun_one(3)" :class="{adsf:type==3}">
				<img src="~path_img/xnb.png" alt="">
				<span>{{$t('newList.title5')}}</span>
			</article>
			<!-- <article @click="fun_one(4)">
                <img src="~path_img/zfb.png" alt="">
                <span>{{$t('newList.title6')}}</span>
            </article>
            <article @click="xiaofeijuan">
                <img src="~path_img/card.png" alt="">
                <span>{{$t('newList.title7')}}</span>
            </article> -->
		</section>
		<section id="three" v-if=" bushu == 1">
			<!-- <h5>{{$t('newList.title8')}}<span>$ {{amount_3}}</span>
				<font v-if="type == 3">&nbsp;&nbsp;&nbsp;USDT <span>${{amount_show}}</span></font>
			</h5> 
			<h6>{{$t('newList.title34')}}</h6>-->

			<article v-if="type == 1">
				<span>{{$t('newList.title35')}}</span>
				<p>{{setting.qq_account}} <i v-clipboard:copy="setting.qq_account"
						v-clipboard:success="firstCopySuccess">{{$t('fuzhi')}}</i></p>
			</article>
			<article v-if="type == 1">
				<span>{{$t('newList.title36')}}</span>
				<p>{{setting.qq_nickname}}<i v-clipboard:copy="setting.qq_nickname"
						v-clipboard:success="firstCopySuccess">{{$t('fuzhi')}}</i></p>
			</article>
			<article v-if="type == 2">
				<span>{{$t('newList.title37')}}</span>
				<p>
					<img :src="this.$https.baseUrl + setting.bld_pic" alt="">
				</p>
			</article>
			<article v-if="type == 3">
				<span>{{$t('newList.title38')}}</span>
				<p>{{setting.usdt_trc}} <i v-clipboard:copy="setting.usdt_trc"
						v-clipboard:success="firstCopySuccess">{{$t('fuzhi')}}</i></p>
			</article>
			<article v-if="type == 3">
				<span>{{$t('newList.title39')}}</span>
				<p>
					<img :src="this.$https.baseUrl + setting.usdt_trc_pic" alt="">
				</p>
			</article>
			<article v-if="type == 4">
				<span>{{$t('newList.title39')}}</span>
				<p>
					<img :src="this.$https.baseUrl + setting.alipay_qrcode" alt="">
				</p>
			</article>
			<!-- <section class="btn">
				<span @click="click_fanhui">{{$t('newList.title40')}}</span>
				<span @click="click_submit">{{$t('newList.title41')}}</span>
			</section>
			<section class="content">
				{{$t('newList.title42')}} <br>
				{{$t('newList.title43')}} <br>
				{{$t('newList.title44')}}
			</section> -->
		</section>
		<section id="two" v-if="bushu == 1">
			<div>
				<span>{{$t('newList.title8')}}</span>
			</div>
			<section class="input-list">
				<article>
					<input type="number" v-model="amount" @blur='udstInput()' :placeholder="$t('newList.title9')">
				</article>
			</section>
			<div class="dsfdsUsdt" v-if="type == 3&&amount_show">
				USDT ${{amount_show}}
			</div>
			<div v-if="type==1">
				<span>{{$t('newList.title10')}}</span>
			</div>
			<section class="input-list" v-if="type==1">
				<article>
					<input type="text" v-model="account" :placeholder="$t('newList.title11')">
				</article>
			</section>
			<div>
				<span>{{$t('newList.title12')}}</span>
			</div>
			<div class="radiogroup">
				<div>
					<label>
						<input type="radio" v-model="fanli0" @click="fanlis(0)" /> {{$t('newList.title13')}}
					</label>
				</div>
				<!-- <div>
					<label>
						<input type="radio" v-model="fanli1" @click="fanlis(1)" /> {{$t('newList.title14')}}
					</label>
				</div> -->
				<!-- <div v-if="user.is_new">
					<label>
						<input type="radio" v-model="fanli2" @click="fanlis(2)" /> {{$t('newList.title15')}}
					</label>
				</div> -->
				
				<div v-if="user.is_new==1">
					<label>
						<input type="radio" v-model="fanli2" @click="fanlis(2)" /> {{$t('newList.title141')}}
					</label>
				</div>
				<div v-if="user.is_new2==1">
					<label>
						<input type="radio" v-model="fanli3" @click="fanlis(3)" /> {{$t('newList.title140')}}
					</label>
				</div>
				<!-- <div>
					<label>
						<input type="radio" v-model="fanli4" @click="fanlis(4)" /> {{$t('newList.title142')}}
					</label>
				</div> -->
			</div>
			<section class="input-list" v-if="false">
				<article>
					<select class="form-custom" v-model="fanli"
						style="background: none;color: #fff;height: 1rem;border: none;width:70%;text-align:left;">
						<option value="0">{{$t('newList.title13')}}</option>

						<option value="1">{{$t('newList.title14')}}</option>
						<option value="2" v-if="user.is_new">{{$t('newList.title15')}}</option>
						<!-- <option value="3" v-if="user.is_new2">新開戶儲值100以上送100%,1000封顶（20倍流水）</option> -->

					</select>
					<img src="../assets/images/xia.png" alt="" style="vertical-align:middle;width:16px;">
				</article>
			</section>
			<div>
				<span>{{$t('newList.title16')}}</span>
			</div>
			<section class="input-list">
				<article>
					<p v-if="type == 1"><img src="../assets/images/fps.png"
							alt=""><span>{{$t('newList.title17')}}</span></p>
					<p v-if="type == 2"><img src="../assets/images/bld.png"
							alt=""><span>{{$t('newList.title18')}}</span></p>
					<p v-if="type == 3"><img src="../assets/images/xnb.png"
							alt=""><span>{{$t('newList.title19')}}</span></p>
					<p v-if="type == 4"><img src="../assets/images/zfb.png"
							alt=""><span>{{$t('newList.title20')}}</span></p>
				</article>
			</section>

			<a href="javascript:;" class="btn" @click="click_submit">
				{{$t('newList.title41')}}
			</a>
			<!-- <a href="javascript:;" class="btn" @click="click_fanhui1"
				style="margin-top: 14px; background: #fff !important;color: #222;">
				{{$t('newList.title22')}}
			</a> -->
			<div class="cztext1">{{$t('newList.title23')}}</div>
			<!-- <div class="czbox">
				<div class="cztext">{{$t('newList.title24')}}</div>
				<div class="cztext2">{{$t('newList.title25')}}</div>
				<div class="cztext2">{{$t('newList.title26')}}</div>
				<div class="cztext2">{{$t('newList.title27')}}</div>
				<div class="cztext2">{{$t('newList.title28')}}</div>
				<div class="cztext2">{{$t('newList.title29')}}</div>
				<div class="cztext2">{{$t('newList.title30')}}</div>
				<img src="../assets/images/chongzhilogo.png" alt="" />
			</div>
			<div class="czbox1">
				<div>{{$t('newList.title31')}}</div>
				<div>{{$t('newList.title32')}}</div>
			</div> -->
		</section>

		<kefu :show="kefu_show" :s_show="s_show" @fun_kefu_x="fun_kefu_x"></kefu>
		<bottom></bottom>
	</section>
</template>

<script>
	import kefu from '@/components/kefu';
	import Bottom from "@/components/bottom"
	import navbar from "@/components/navbar"
	import topHeader from "@/components/topHeader"
	import {
		Form,
		Field,
		Dialog
	} from 'vant'
	export default {
		name: "chongzhi",
		data() {
			return {
				bushu: 1, //第几步
				type: 1, //点击的哪一个
				amount: '', ///金额
				kefu_show: false,
				s_show: false,
				bilv_1: 1, //充值比率
				bilv_2: 1, //充值比率
				bilv_3: 1, //充值比率
				bilv_4: 1, //充值比率
				amount_3: '', ///最终价格
				setting: this.$store.state.config,
				red: true,
				red2: false,
				fanli: 0,
				fanli0: true,
				fanli1: false,
				fanli2: false,
				fanli3: false,
				fanli4: false,
				account: '',
				user: {
					is_new: 0,
					is_new2: 0
				}
			}
		},
		components: {
			navbar,
			Bottom,
			kefu,
			topHeader,
			[Form.name]: Form,
			[Field.name]: Field,
			[Dialog.name]: Dialog
		},
		created() {
			this.$store.commit('Tabbar_index', 4)
		},
		mounted() {
			let _this = this
			this.$https.fetchPost('/m/config', {}).then((res) => {
				_this.$store.commit('config', res.data)
				_this.setting = res.data
			})
			this.$https.fetchGet('/m/personal', {}).then(res => {
				let data = res.data
				this.$store.commit('user', data.member)
				this.user = data.member

			})
		},
		methods: {
			udstInput() {
				if (String(this.amount).indexOf('.') == -1) {
					this.xiaoshu = Math.floor(Math.random() * 10);
					if (this.xiaoshu == 0) {
						this.xiaoshu = parseInt(Math.floor(Math.random() * 10));
					}
					this.amount = Number(this.amount) + Number(this.xiaoshu / 10);
					if (this.type == 3) {
						this.amount_show = (this.amount / this.setting.usdt_lv).toFixed(1);
					}
					this.amount = this.amount.toFixed(1)
				}
			},
			fanlis(e) {
				if (e == 0) {
					if (this.fanli != e) {
						this.fanli = 0
						this.fanli0 = true
						this.fanli1 = false
						this.fanli2 = false
						this.fanli3 = false
						this.fanli4 = false
					}
				}
				if (e == 1) {
					if (this.fanli != e) {
						this.fanli = 1
						this.fanli0 = false
						this.fanli1 = true
						this.fanli2 = false
						this.fanli3 = false
						this.fanli4 = false
					}
				}
				if (e == 2) {
					if (this.fanli != e) {
						this.fanli = 2
						this.fanli0 = false
						this.fanli1 = false
						this.fanli2 = true
						this.fanli3 = false
						this.fanli4 = false
					}
				}
				if (e == 3) {
					if (this.fanli != e) {
						this.fanli = 3
						this.fanli0 = false
						this.fanli1 = false
						this.fanli2 = false
						this.fanli3 = true
						this.fanli4 = false
					}
				}
				if (e == 4) {
					if (this.fanli != e) {
						this.fanli = 4
						this.fanli0 = false
						this.fanli1 = false
						this.fanli2 = false
						this.fanli3 = false
						this.fanli4 = true
					}
				}
			},
			onClickRight() {
				this.s_show = true
				this.kefu_show = true
			},
			fun_kefu_x() {
				this.s_show = false
				this.kefu_show = false
			},
			songfen(val) {
				if (val == 'red') {
					this.red = true;
					this.red2 = false;
					this.fanli = 1;
				} else {
					this.red = false;
					this.red2 = true;
					this.fanli = 0;
				}
			},
			xiaofeijuan() { //消费卷
				this.$refs.navbar.onClickRight()
			},
			firstCopySuccess() {
				this.$toast(this.$t('newList.title45'));
			},
			fun_one(int) {
				this.type = int
				if (this.type == 3) {
					this.amount_show = (this.amount / this.setting.usdt_lv).toFixed(2);
				}
				// this.bushu = 2
			},
			click_fanhui1() { //第二步返回
				this.bushu = 1
			},
			click_chongzhi() { ////第二步确认
				if (this.amount == '' || this.amount < 0) {
					this.$toast(this.$t('newList.title46'))
				}
				if (!this.account && this.type == 1) {
					this.$toast(this.$t('newList.title47'));
				} else {
					this.xiaoshu = parseInt(Math.random() * 40, 10);
					this.amount_3 = Number(this.amount) + Number(this.xiaoshu / 100);
					// switch (this.type) {
					//     case 1:
					//         this.amount_3 = Number(this.amount) + Number(parseInt(Math.random()*40,10)/100);
					//     break;
					//     case 2:
					//         this.amount_3 = this.amount + randomNum(0,40);
					//         break;
					//     case 3:
					//         this.amount_3 = this.amount + randomNum(0,40);
					//         break;
					//     case 4:
					//         this.amount_3 = this.amount + randomNum(0,40);
					//         break;
					//     default:
					//         this.amount_3 = this.amount + randomNum(0,40);
					//     break;
					// }
					this.bushu = 3;
					this.amount_show = (this.amount_3 / this.setting.usdt_lv).toFixed(2);
				}
			},
			click_fanhui() { //第三步返回重新输入
				this.bushu = 2
			},
			click_submit() {
				if (this.amount == '' || this.amount < 0) {
					this.$toast(this.$t('newList.title46'))
					return false;
				}
				if (!this.account && this.type == 1) {
					this.$toast(this.$t('newList.title47'));
					return false;
				} else {
					this.xiaoshu = parseInt(Math.random() * 40, 10);
					this.amount_3 = Number(this.amount) + Number(this.xiaoshu / 100);
					// switch (this.type) {
					//     case 1:
					//         this.amount_3 = Number(this.amount) + Number(parseInt(Math.random()*40,10)/100);
					//     break;
					//     case 2:
					//         this.amount_3 = this.amount + randomNum(0,40);
					//         break;
					//     case 3:
					//         this.amount_3 = this.amount + randomNum(0,40);
					//         break;
					//     case 4:
					//         this.amount_3 = this.amount + randomNum(0,40);
					//         break;
					//     default:
					//         this.amount_3 = this.amount + randomNum(0,40);
					//     break;
					// }
					// this.bushu = 3;
					this.amount_show = (this.amount_3 / this.setting.usdt_lv).toFixed(2);
				}
				Dialog.confirm({
						message: this.$t('newList.title48'),
						confirmButtonText: this.$t('newList.title49')
					}).then(() => {
						///处理
						if (this.xiaoshu < 10) {
							var xiao = '0' + this.xiaoshu;
						} else {
							var xiao = this.xiaoshu;
						}
						if (this.type == 1) {
							//专属快
							var url = '/m/qq_pay';

						} else if (this.type == 2) {
							//便利店
							var url = '/ajax_pay';
							this.$https.fetchPost(url, {
								'amount': this.amount,
								'xiaoshu': xiao,
								'fanli': this.fanli
							}).then(res => {
								this.$router.push('/betrecord')
							}).catch(err => {
								this.$toast(this.$t('newList.title50'));
							})
							return;
						} else if (this.type == 3) {
							var url = '/ajax_pay';
							this.$https.fetchPost(url, {
								'amount': this.amount,
								'xiaoshu': xiao,
								'paytype': 'usdt',
								'fanli': this.fanli,
								'amount_show': this.amount_show
							}).then(res => {
								this.$router.push('/betrecord')
							}).catch(err => {
								this.$toast(this.$t('newList.title50'));
							})
							return;
						} else if (this.type == 4) {
							var url = '/m/ali_pay';
						}
						this.$https.fetchPost(url, {
							'money': this.amount,
							'xiaoshu': xiao,
							'account': this.account,
							'fanli': this.fanli
						}).then(res => {
							this.$router.push('/betrecord')
						}).catch(err => {
							this.$toast(this.$t('newList.title50'));
						})
					})
					.catch(() => {
						// on cancel

					});
			}
		}
	}
</script>

<style scoped lang="less">
	.top-df {
		display: flex;
		align-items: center;
		position: relative;
		padding: 20px 0px 20px 0px;
		justify-content: flex-end;
		box-sizing: border-box;

		div:nth-child(1) {
			display: flex;
			align-items: center;
			font-size: 15px;
			color: #fff;
			width: 100%;
			justify-content: center;
			padding: 0px 20px 0px 0px;
			box-sizing: border-box;

			img {
				width: 40px;
				height: 40px;
				margin-right: 5px;
			}
		}

		div:nth-child(2) {
			display: flex;
			align-items: center;
			font-size: 12px;
			width: 75px;
			height: 22px;
			position: absolute;
			top: 20px;
			right: 20px;
			color: #333;
			border-radius: 2px;
			background-image: linear-gradient(#f6ce38, #dda82d);
			justify-content: center;

			img {
				width: 20px;
				height: 20px;
			}
		}
	}

	.chongzhis {
		min-height: calc(100vh);
		// background: url("~path_img/chongzhibg.png") center no-repeat;
		// background-size: cover;
		background-color: #333333;
		padding-bottom: 100px;
		box-sizing: border-box;
	}

	.chongzhis1 {
		min-height: calc(100vh);
		// background: url("~path_img/chongzhibg1.jpg") center no-repeat;
		// background-size: cover;
		background-color: #333333;
		padding-bottom: 100px;
		box-sizing: border-box;
	}

	.red {
		border: 1px solid red;
	}

	#one {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: .3rem;

		article {
			background: rgba(255, 255, 255, .35) 90% center no-repeat;
			background-size: .27rem .46rem;
			padding: 5px 10px;
			width: 31%;
			border-radius: .2rem;
			text-align: center;
			margin-bottom: .3rem;

			img {
				width: 1.1rem;
				height: 1.1rem;
			}

			span {
				display: block;
				color: #fff;
				font-size: 13px;
			}
		}

		.adsf {
			background: #ffff00;

			span {
				color: #000;
			}
		}
	}

	#two {
		padding: 0 .4rem;
		padding-top: 10px;

		&>div {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-bottom: 10px;

			&>span {
				color: #fff;
				font-size: 14px;
			}
		}

		&>section {
			display: flex;
			font-size: .34rem;
			background-color: #fff;
			align-items: center;
			border-radius: .2rem;
			margin: .3rem 0;
			overflow: hidden;

			&>article {
				width: 7rem;
				height: 1rem;

				input {
					width: 100%;
					line-height: 1rem;
					background-color: transparent;
					border: none;
					color: #f49623;
					font-size: 15px;
					padding: 0 16px;

					&::-webkit-input-placeholder {
						color: #555;
					}
				}

				p {
					display: flex;
					// border:1px solid red;
					width: 6.3rem;
					justify-content: left;
					padding: .2rem .2rem;
					float: left;
					height: 1rem;
					align-items: center;

					img {
						width: .5rem;
						height: .5rem;
						margin-right: 5px;
					}

					span {
						color: #f49623;
					}
				}
			}
		}

		select option {
			background-color: #000;
			color: #fff;
		}

		.dsfdsUsdt {
			width: 100%;
			margin: 2px 0;
			text-align: right;
			font-size: 13px;
			color: #f49623;
		}

		.btn {
			background: #f49623;
			height: 38px;
			width: 100%;
			margin: 14px auto 0;
			color: #fff;
			line-height: 38px;
			text-align: center;
			font-size: .4rem;
			display: block;
			border-radius: .2rem;
		}

		.radiogroup {
			display: block;
			font-size: 16px;
			color: #fff;
			text-align: left;
			margin-top: 10px;

			div {
				width: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-bottom: 10px;
			}
		}
	}

	#three {
		h5 {
			padding-top: .6rem;
			font-weight: normal;
			font-size: .4rem;
			color: #fff;
			margin-bottom: .4rem;

			span {
				font-size: .5rem;
				color: #F9AB10;
			}
		}

		h6 {
			font-weight: normal;
			color: #fff;
			font-size: .5rem;
			margin-bottom: .6rem;
		}

		&>article {
			padding: 0 .3rem;
			display: flex;
			font-size: .34rem;
			margin-bottom: .6rem;

			span {
				display: flex;
				width: 3.5rem;
				color: #fff;
				text-align: left;
			}

			p {
				color: #f49623;
				position: relative;
				width: 12rem;
				text-align: left;

				i {
					color: #fff;
					border: #fff solid 1px;
					padding: .1rem .15rem;
					display: inline-block;
					position: absolute;
					right: 0;
					font-size: .32rem;
				}

				img {
					width: 100%;
				}
			}
		}

		.btn {
			padding: 0 .4rem;
			display: flex;
			justify-content: space-between;

			span {
				width: 48%;
				display: block;
				font-size: .42rem;
				line-height: 1.3rem;

				&:first-child {
					background: #fff !important;
					color: #222;
				}

				&:last-child {
					background-color: #f49623;
					color: #fff;
				}
			}
		}

		.content {
			padding: .5rem;
			font-size: .34rem;
			color: #fff000;
			text-align: left;
			line-height: 3;
		}
	}

	.cztext1 {
		width: 100%;
		text-align: center;
		margin: 15px 0;
		margin-bottom: 20px;
		font-size: 14px;
		color: #fff;
	}

	.czbox {
		width: 100%;
		position: relative;

		.cztext {
			width: fit-content;
			line-height: 18px;
			padding: 0 6px;
			font-size: 14px;
			background: linear-gradient(to bottom, #fff000, #b5a900);
			color: #000;
			border-radius: 4px;
		}

		.cztext2 {
			font-size: 14px;
			color: #fff;
			margin-top: 10px;
			text-align: left;
		}

		img {
			width: 170px;
			position: absolute;
			top: 0;
			right: 0;
		}
	}

	.czbox1 {
		width: 100%;
		padding: 10px 12px;
		background: rgba(255, 255, 255, .35);
		font-size: 14px;
		color: #fff;
		border-radius: 5px;
		margin-top: 10px;
		text-align: left;
	}
</style>